<template>
    <div class="details">
        <div class="navmenu">
            <el-menu
            default-active="2"
            background-color="#FFFFFF"
            class="el-menu-vertical-demo">
            <el-submenu index="1">
                <template slot="title">
                <i class="el-icon-location"></i>
                <span class="span_title">项目介绍</span>
                </template>
                <el-menu-item index="1-1" @click="jump(1)">项目简介</el-menu-item>
                <el-menu-item index="1-2" @click="jump(2)">用户角色描述</el-menu-item>
                <el-menu-item index="1-3" @click="jump(3)">项目概述</el-menu-item>
                <el-menu-item index="1-4" @click="jump(4)">项目特性</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                <i class="el-icon-menu"></i>
                <span class="span_title">常见问题</span>
                </template>
                <el-menu-item index="2-1" @click="jump(5)">找回密码</el-menu-item>
                <el-menu-item index="2-2" @click="jump(6)">验证码接收异常</el-menu-item>
                <el-menu-item index="2-3" @click="jump(7)">搜索引擎与查询方式</el-menu-item>
                <el-menu-item index="2-4" @click="jump(8)">如何联系客服</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                <i class="el-icon-s-data"></i>
                <span class="span_title">用户须知</span>
                </template>
                <el-menu-item index="3-1" @click="jump(9)">服务协议</el-menu-item>
                <el-menu-item index="3-2" @click="jump(10)">隐私保护指引</el-menu-item>
                <el-menu-item index="3-3" @click="jump(11)">知识产权声明</el-menu-item>
                <el-menu-item index="3-4" @click="jump(12)">免责事由</el-menu-item>
            </el-submenu>
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title" class="span_title" @click="jump(13)">更新日志</span>
            </el-menu-item>
            </el-menu>
        </div>
        <div class="main">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        jump(index){
            switch (index) {
            case 1:
                this.$router.replace('/');
                break;
            case 2:
                this.$router.replace('/');
                break;
            case 3:
                this.$router.replace('/');
                break;
            case 4:
                this.$router.replace('/');
                break;
            case 5:
                this.$router.replace('/');
                break;
            case 6:
                this.$router.replace('/');
                break;
            case 7:
                this.$router.replace('/search');
                break;
            case 8:
                this.$router.replace('/');
                break;
            case 9:
                this.$router.replace('/');
                break;
            case 10:
                this.$router.replace('/privacy');
                break;
            case 11:
                this.$router.replace('/');
                break;
            case 12:
                this.$router.replace('/service');
                break;
            case 13:
                this.$router.replace('/');
                break;
        }
        }
    }
};
</script>

<style scoped>
@import "../assets/css/body.css";
.details{
    width: 100%;
    height:100%;
    margin-bottom: 20px;
}
.navmenu{
    height: 600px;
    width: 300px;
    margin-left: 200px;
    margin-top: 60px;
    float: left;
    border:2px solid #ccc;
}
.main{
    width: 600px;
    float: left;
    margin-left: 20px;
    margin-top: 60px;
    background-color: aliceblue;
}
.span_title{
    font-weight: 600;
    font-size: 150%;
}
</style>